<template>
  <div class="container">
    <div class="header" >
      <div class="return" @click="$router.back()" style="position: absolute;top:1.3rem;left:1rem;width: 1.4rem;height: 1.4rem">
        <img src="static/img/return2.png"  width="100%" height="100%"/>
      </div>
      <h2 >交易记录</h2>
    </div>
    <div class="imgBox">
      <img src="static/img/success.png"/>
    </div>


    <div class="value">
      {{convertBigNumber(tran.decimals?tran.value/Math.pow(10,tran.decimals):tran.value)}} <span style="font-size: .8rem;color:#919191">{{tran.name}}</span>
    </div>

    <div class="info">
      <div class="gray">发款方</div>
      <div class="black">{{tran.fromAddress}}</div>
      <div class="gray">收款方</div>
      <div class="black">{{tran.toAddress}}</div>
      <div class="gray">矿工费用</div>
      <div class="black">{{tran.gasMoney}} ether</div>
      <div class="gray">备注</div>
      <div class="black">0x</div>
    </div>


    <div class="tranNumber">
      <div>
        <div class="gray">交易号 :</div>
        <div class="txhash"><img src="static/img/info.png"><span>

           <a :title="tran.txhash">{{tran.txhash}}</a>
          <!--<a :href="'https://cn.etherscan.com/tx/' + tran.txhash ">{{tran.txhash}}</a> -->
        </span></div>
        <div class="gray">区块 :</div>
        <div class="black">{{tran.blockNumber}}</div>
        <div class="gray">交易时间 :</div>
        <div class="black">{{tran.date}}</div>
      </div>

      <div>
        <div ><canvas id="QRCode" ref='QRCode' style="width:3rem;height:3rem;"></canvas></div>
        <div><mt-button id="getHash" :href="txHashAddress" type="default" data-clipboard-target="#txhash" @click="copy" style="width: 100%;height: 100%;max-width: 100%;max-height:100%;font-size: .8rem;color:#535353;background: #eef1f5">复制 URL</mt-button> </div>
      </div>



    </div>
    <input type="text" style="display: none"  id="txhash" v-model="txHashAddress"/>
  </div>

</template>


<script>
   import { Button  } from 'mint-ui';

   import  web3Util from 'ethereumjs-util';
   import Clipboard from 'clipboard'
   import {mapGetters,mapActions} from 'vuex'
   import  accountUtils from '../../service/eth/accountUtils'
  import { etherscanAK} from '../../service/eth/config'
  import axios from 'axios'
  // import  accountUtils from '../../service/accountUtils'

  export default {
    components:{

    },
    data () {
      return {
          tran:this.$route.params.tran,
        txHashAddress:'cn.etherscan.com/tx/'+this.$route.params.tran.txhash
      }
    },

    computed:{
      ...mapGetters(['currentAccount','wallet','accountIndex','web3','ethBaseNet'])
    },
    methods: {
      ...mapActions(['setWallet','setAccountIndex']),
      // returnPage(){
      //
      //   // this.$router.back()
      //   if(this.tran.name=='eth'||this.tran.name=='ether'){
      //     this.$router.push({name:'Transaction',params:{symbol:'eth'}})
      //   }else{
      //     this.$router.push({name:'TransactionERC',params:{symbol:this.$route.params.tran.name,coin:this.$route.params.coin}})
      //   }
      // },
      convertBigNumber:(param)=>{
        let strParam = String(param)
        let flag = /e/.test(strParam)
        if (!flag) return param

        // 指数符号 true: 正，false: 负
        let sysbol = true
        if (/e-/.test(strParam)) {
          sysbol = false
        }
        // 指数
        let index = Number(strParam.match(/\d+$/)[0])
        // 基数
        let basis = strParam.match(/^[\d\.]+/)[0].replace(/\./, '')

        if (sysbol) {
          return basis.padEnd(index + 1, 0)
        } else {
          return basis.padStart(index + basis.length, 0).replace(/^0/, '0.')
        }
      },
      copy() {
        new Clipboard('#getHash', {
          text: function(trigger) {
            Dialog.alert({
              title: '提示',
              message: '已成功复制到剪切板'
            }).then(() => {

            });
            return trigger.getAttribute('href'); // 返回需要复制的内容
          }
        });
        // let clipboard = new Clipboard('#getHash')
        // clipboard.on('success', e => {
        //   MessageBox('提示', '已成功复制到剪切板');
        //   console.log(e)
        //   clipboard.destroy() //使用destroy可以清楚缓存
        // })
        // clipboard.on('error', e => {
        //   clipboard.destroy()
        // })
      }
    },
    async mounted() {

      if( this.$route.params.tran){
console.log(this.$route.params.tran)
        // let input=web3.utils.toUtf8(this.$route.params.tran.input);
        //  this.tran.input=input;
      }
      accountUtils.generatePublicKeyQrCode('QRCode','cn.etherscan.com/tx/'+this.tran.txhash)
      this.$refs.QRCode.style.width = '100%'
      this.$refs.QRCode.style.height = '100%'
    }
  }
</script>
<style lang="less" scoped>
  @import url("../../assets/css/transactionInfo.less");

</style>

